<template>
    <div class="main_content">
        <div class="content">
            <div class="search">
                <div class="list">
                    <span>关键字搜索:</span>
                    <Input v-model="keyword" placeholder="请输入关键字进行搜索" style="width:200px" maxlength="15" clearable/>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
                <input type="text" class="intBox" style="display:none" />
                <div class="list">
                    <el-button type="primary" @click="searchAll" size="small" plain>搜索</el-button>
                    <el-button type="info" @click="clear" style="margin-left:20px;" size="small">重置</el-button>
                </div>
            </div>
            <el-button type="primary" @click="updateRow(0)" size="small" plain>添加账号</el-button>
            <div class="table">
                <el-table :data="userList" :height="tableHeight">
                    <el-table-column prop="username" label="用户名"></el-table-column>
                    <el-table-column prop="nickname" label="姓名"></el-table-column>
                    <el-table-column prop="phone" label="电话"></el-table-column>
                    <el-table-column prop="status" label="状态">
                        <template slot-scope="scope">
                            <div v-if="scope.row.status == 1">
                                <Icon type="md-checkmark-circle" style="color:#19be6b;font-size: 18px;"/>
                                <span style="margin-left:5px;">启用</span>
                            </div>
                            <div v-if="scope.row.status ==0">
                                <img src="../../assets/images/sys/dept/disable.png" alt="" width="15" height="15" style="vertical-align: middle;">
                                <span style="margin-left:5px;">禁用</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="updateRow(1,scope.$index, userList)" type="text" size="small">编辑</el-button>
                            <!-- <el-button v-if="scope.row.status == 0" @click.native.prevent="enable(scope.$index, userList)" type="text" size="small"  v-preventReClick="1500">启用</el-button>
                            <el-button v-if="scope.row.status == 1" @click.native.prevent="enable(scope.$index, userList)" type="text" size="small"  v-preventReClick="1500">禁用</el-button> -->
                            <el-button @click.native.prevent="resetpsw(scope.$index, userList)" type="text" size="small">重置密码</el-button>
                            <el-button @click.native.prevent="remove(scope.$index, userList)" type="text" size="small" >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="clearfix" v-show="userList.length>0">
                <div class="float-right">
                    <Page v-if="totalCount" style="margin: 20px 0;text-align: right;" :current.sync="current" :total="totalCount" :page-size="10" show-elevator show-total @on-change="pageChange"></Page>
                </div>
            </div>
        </div>

        <Modal v-model="modal" :title="isAdd?'添加账号':'编辑账号'" :mask-closable="false">
            <div>
                <div class="item2">
                    <span class="tip">*</span>
                    <span>用户名:</span>
                    <Input v-model="username" placeholder="请输入账号编号" style="width: 300px" clearable/>
                </div>
                <div class="item2" v-if="isAdd==true">
                    <span class="tip">*</span>
                    <span>密码:</span>
                    <Input v-model="password" placeholder="请输入密码" style="width: 300px" type="password" clearable/>
                </div>
                <div class="item2" v-if="isAdd==true">
                    <span class="tip">*</span>
                    <span>确认密码:</span>
                    <Input v-model="passwordagain" placeholder="请确认密码" style="width: 300px" type="password" clearable/>
                </div>
                <div class="item2">
                    <span class="tip">*</span>
                    <span>姓名:</span>
                    <Input v-model="nickname" placeholder="请输入姓名" style="width: 300px" clearable/>
                </div>
                <div class="item2">
                    <span class="tip">*</span>
                    <span>手机号:</span>
                    <Input v-model="phone	" placeholder="请输入手机号" style="width: 300px" clearable/>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(1)" type="info" size="small" plain>取消</el-button>
                <el-button @click="submitAll" type="primary" size="small" plain v-preventReClick="1500">保存</el-button>
            </div>
        </Modal>

        <Modal v-model="pswModal" title="重置密码" width="520px;" :mask-closable="false">
            <!-- <div style="margin:10px">确定要删除这条数据吗？</div> -->
            <div class="item2">
                <span class="tip">*</span>
                <span>密码:</span>
                <Input v-model="psw" placeholder="请输入密码" style="width: 300px" type="password" clearable/>
            </div>
            <div class="item2">
                <span class="tip">*</span>
                <span>确认密码:</span>
                <Input v-model="pswagain" placeholder="请确认密码" style="width: 300px" type="password" clearable/>
            </div>
            <div slot="footer">
                <el-button @click="cancel(3)" type="info" size="small" plain>取消</el-button>
                <el-button @click="reset" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="deleteModal" title="删除" width="360px;" :mask-closable="false">
            <div style="margin:10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(2)" type="info" size="small" plain>取消</el-button>
                <el-button @click="detele" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import {
    getInnerUserList,
    getUserResetPassword,
    getInnerUserAdd,
    getInnerUserEdit,
    getUserRemove,
    getUserEnable,
} from "@/api/api.js";
export default {
    data() {
        return {
            totalCount: "",
            current: 1,
            pageNum: 1,
            pageSize: 10,
            keyword: "",
            roleId: "",
            deptId: "",
            modal: false,
            isAdd: true,
            userList: [],
            role: "",
            ids: "",
            username: "",
            password: "",
            passwordagain: "",
            email: "",
            phone: "",
            nickname: "",
            treeids: "",
            deptName: "",
            id: "",
            psw: "",
            pswagain: "",
            pswModal: false,
            pswid: "",
            deleteModal:false,
            tableHeight: window.innerHeight - 325,
        };
    },
    methods: {
        getuserList() {
            let params = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                keyword: this.keyword
            };
            getInnerUserList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.userList = res.data.list;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        pageChange(index) {
            this.pageNum = index;
            this.getuserList();
        },
        searchAll() {
            this.getuserList();
        },
        clear() {
            this.keyword = "";
            this.getuserList();
        },
        getdeptList() {
            getAlldeptList()
                .then(res => {
                    if (res.code == 200) {
                        this.t = res.data.list;
                        this.datalist = trans(this.t);
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        updateRow(type, index, rows) {
            if (type == 1) {
                this.isAdd = false;
                this.username = rows[index].username;
                this.id = rows[index].id;
                this.nickname = rows[index].nickname;
                this.password = rows[index].password;
                this.mach = rows[index].deptId;
                this.phone = rows[index].phone;
                this.email = rows[index].email;
                this.treeids = rows[index].deptId;
            } else {
                this.mach = null;
                this.isAdd = true;
                this.username = "";
                this.nickname = "";
                this.password = "";
                this.passwordagain = "";
                this.role = "";
                this.phone = "";
                this.email = "";
            }
            this.modal = true;
        },
        resetpsw(index, rows) {
            this.pswModal = true;
            this.pswid = rows[index].id;
            this.psw = "";
            this.pswagain = "";
        },
        reset() {
            if (this.psw == "" || this.pswagain == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "密码不能为空"
                });
                return;
            }
            if (this.psw != this.pswagain) {
                this.$Modal.warning({
                    title: "错误",
                    content: "两次输入的密码不一致"
                });
                return;
            }
            let params = {
                userId: this.pswid,
                password: this.psw
            };
            getUserResetPassword(params)
                .then(res => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.pageNum = 1;
                        this.getuserList();
                        this.pswModal = false;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        submitAll() {
            var reg = new RegExp(
                "^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$"
            );
            if (this.username === "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "用户名不能为空"
                });
                return;
            }

            if (this.nickname === "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "昵称不能为空"
                });
                return;
            }
            if (this.phone == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "手机号不能为空"
                });
                return;
            }
            if (this.phone != "") {
                if (!/^1[3456789]\d{9}$/.test(this.phone)) {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请填写正确的手机号"
                    });
                    return;
                }
            }
            if (this.isAdd) {
                if (this.password === "" || this.passwordagain === "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "密码不能为空"
                    });
                    return;
                }
                if (this.password != this.passwordagain) {
                    this.$Modal.warning({
                        title: "错误",
                        content: "两次输入的密码不一致"
                    });
                    return;
                }
                let params = {
                    username: this.username,
                    password: this.password,
                    nickname: this.nickname,
                    phone: this.phone,
                };
                getInnerUserAdd(params)
                    .then(res => {
                        if (res.code == 200) {
                            this.$Message.success("操作成功");
                            this.pageNum = 1;
                            this.current = 1;
                            this.deptId = this.mach;
                            this.getuserList();
                            this.modal = false;
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            } else {
                let params = {
                    username: this.username,
                    nickname: this.nickname,
                    phone: this.phone,
                    userId: this.id
                };
                getInnerUserEdit(params)
                    .then(res => {
                        if (res.code == 200) {
                            this.$Message.success("操作成功");
                            this.getuserList();
                            this.modal = false;
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        },
        remove(index,rows){
            this.deleteModal = true;
            this.removeId = rows[index].id;
        },
        detele() {
            getUserRemove(this.removeId)
                .then(res => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.getuserList();
                        this.deleteModal = false;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        // enable(index,rows) {
        //    let params = {
        //         userId: rows[index].id,
        //         status: rows[index].status,
        //     };
        //     getUserEnable(params)
        //         .then(res => {
        //             if (res.code == 200) {
        //                 this.$Message.success("操作成功");
        //                 this.pageNum = 1;
        //                 this.getuserList();
        //             } else {
        //                 this.$Message.warning(res.msg);
        //             }
        //         })
        //         .catch(error => {
        //         });
        // },
        cancel(type) {
            if (type === 1) {
                this.modal = false;
                this.username = "";
                this.treeid = "";
            }  else if (type === 3) {
                this.pswModal = false;
            } else if (type == 2) {
                this.deleteModal = false;
            }
        },
    },
    mounted() {
        this.getuserList();
    }
};
</script>

<style lang="less" scoped>
@import "./../../assets/style/themeBase.less";
.main_content {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    .content {
        width: 100%;
        height: 100%;
        padding: 20px;
        border-radius: 6px;
        background-color: #fff;
        .search {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            .list {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-right: 20px;
                margin-bottom: 20px;
                span {
                    display: inline-block;
                    margin-right: 10px;
                }
            }
        }
        .table{
            margin-top: 10px;
        }
    }
}
.item2 {
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    padding-left: 10px;
    .tip {
        position: absolute;
        color: red;
        font-size: 16px;
        top: 8px;
        left: 0;
    }
}
.left::-webkit-scrollbar {
    display: none;
}
</style>
